<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 400px;
            height: 400px;
            background-color: grey;
            margin: 50px;
            overflow: hidden;
            /* position: relative; */
        }

        .sub {
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 50px;
            overflow: hidden;
            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="sub">
            <div class="box"></div>
        </div>
    </div>
</body>
<script>
    var wrap = document.getElementsByClassName("wrap")[0];
    var sub = document.getElementsByClassName("sub")[0];
    var box = document.getElementsByClassName("box")[0];


    // W3C新增方法addEventListener 可以分别以 事件捕获 事件冒泡方式触发事件  -> 如果同时绑定以事件捕获和事件冒泡方式绑定事件 -> 怎么触发?

    // 事件流:
    // 1. 捕获阶段 ->   从最不特定的元素,到最特定的元素,从外到内依次触发
    // window -> document -> html -> body -> wrap ->  sub  -> box(事件源)

    // 2. 目标阶段 -> 如果目标元素有同种类型的事件就触发,否则就跳过

    // 3. 冒泡阶段 ->  从最特定的元素 到 最不特定的元素, 从内到外依次触发  (从目标元素的父元素开始 向外层冒泡触发)
    // box(事件源) -> sub -> wrap -> body -> html -> document -> window



    // 事件冒泡,事件捕获,事件流 -> 事件传播的默认机制 

    // 如果想让事件传播到某个元素停止  -> 需要阻止事件冒泡 / 事件捕获 (继续向后传播)

    // 技巧: 期望在哪个元素上停,就可以在哪个元素上阻止

    // 如何阻止事件冒泡?
    // 常规浏览器     => IE没有这个方法
    // e.stopPropagation();    

    // IE
    // e.cancelBubble = true;

    // 兼容:
    // //判断是否存在此方法
    // if (e.stopPropagation) {  // 有 => 常规浏览器
    //     e.stopPropagation()
    // } else {  // 没有
    //     e.cancelBubble = true;
    // }




    var wrap = document.getElementsByClassName("wrap")[0];
    var sub = document.getElementsByClassName("sub")[0];
    var box = document.getElementsByClassName("box")[0];

    // 以事件捕获方式触发事件
    window.addEventListener("click", function () {
        console.log("捕获", "window被点击");
    }, true);
    document.addEventListener("click", function () {
        console.log("捕获", "document被点击");
    }, true);
    document.documentElement.addEventListener("click", function () {
        console.log("捕获", "html被点击");
    }, true);
    document.body.addEventListener("click", function () {
        console.log("捕获", "body被点击");
    }, true);
    wrap.addEventListener("click", function (e) {
        console.log("捕获", "wrap被点击");
        if (e.stopPropagation) {  // 有 => 常规浏览器
            e.stopPropagation()
        } else {  // 没有
            e.cancelBubble = true;
        }
    }, true);
    sub.addEventListener("click", function () {
        console.log("捕获", "sub被点击");
    }, true);
    box.addEventListener("click", function () {
        console.log("捕获", "box被点击");
    }, true);


    // 以事件冒泡方式触发事件
    /* window.addEventListener("click", function () {
        console.log("冒泡", "window被点击");
    }, false);
    document.addEventListener("click", function () {
        console.log("冒泡", "document被点击");
    }, false);
    document.documentElement.addEventListener("click", function () {
        console.log("冒泡", "html被点击");
    }, false);
    document.body.addEventListener("click", function () {
        console.log("冒泡", "body被点击");
    }, false);

    // 如果向让事件传播到wrap后,不在继续向后传播 
    wrap.addEventListener("click", function (e) {
        console.log("冒泡", "wrap被点击");

        // if (e.stopPropagation) {  // 有 => 常规浏览器
        //     e.stopPropagation()
        // } else {  // 没有
        //     e.cancelBubble = true;
        // }
    }, false);
    sub.addEventListener("click", function () {
        console.log("冒泡", "sub被点击");
    }, false);

    // 如果仅希望 box触发自己的 不往后传播 
    box.addEventListener("click", function (e) {
        console.log("冒泡", "box被点击");

        var e = e || window.event;

        // 阻止事件冒泡  
        // 常规浏览器     => IE没有这个方法
        // e.stopPropagation();    

        // IE
        // e.cancelBubble = true;

        // 兼容:
        // //判断是否存在此方法
        // if (e.stopPropagation) {  // 有 => 常规浏览器
        //     e.stopPropagation()
        // } else {  // 没有
        //     e.cancelBubble = true;
        // }



    }, false); */







</script>

</html>